<template>
  <div class="main01">
    <basic-layout title="出入保证卡详情" :showAddBtn="false" class="wrapBox">

      <div class="body_box">
        <div class="main">
          <div class="head">
            <div class="picStyle" v-if="type == '1'"/>
            <div class="f" v-if="type == '1'">
              审核中
            </div>

            <div class="picStylePass" v-if="type == '2'"/>
            <div class="f" v-if="type == '2'">
              审核通过
            </div>
            <!--            <div class="ff" v-if="type == '2'">-->
            <!--              有效期: {{ formData.validDate }}-->
            <!--            </div>-->

            <div class="picStyleNoPass" v-if="type == '3'"/>
            <div class="f" v-if="type == '3'">
              审核不通过
            </div>
          </div>

          <div>
            <div class="fContentMain firstClass">
              <div class="contentC">
                <div>
                  <div class="title">
                    <div>申请编号</div>
                    <div>{{ formData.appNo }}</div>
                  </div>
                  <div class="title">
                    <div>访客中心</div>
                    <div>{{ formData.centerName }}</div>
                  </div>

                  <div class="title">
                    <div>申请时间</div>
                    <div>{{ formData.appTime }}</div>
                  </div>

                  <div class="title">
                    <div>申请人</div>
                    <div>{{ formData.applnt }}</div>
                  </div>

                  <div class="title">
                    <div>手机号</div>
                    <div>{{ $infoHiding.handlePhone(formData.applntPhone) }}</div>
                  </div>

                  <div class="title">
                    <div>卡类型</div>
                    <div>{{ formData.cardTypeName }}</div>
                  </div>

                  <div class="title">
                    <div>申请部门</div>
                    <div>{{ formData.corpName }}</div>
                  </div>

                  <div class="title">
                    <div>有效期</div>
                    <div>{{ formData.validDate }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div v-if="formData.visitorsCardAppHdldetailList"
               :class="{ 'peopleMain' : (formData.visitorsCardAppHdldetailList && formData.visitorsCardAppHdldetailList.length > 1),
                'peopleMainSingle' : (formData.visitorsCardAppHdldetailList && formData.visitorsCardAppHdldetailList.length == 1) }">
            <div v-for="item2 in formData.visitorsCardAppHdldetailList" class="people">
              <div class="fContentMain secondClass">
                <div class="contentC">
                  <div class="title">
                    <div>姓名</div>
                    <div>{{ item2.name }}</div>
                  </div>
                  <div class="title">
                    <div>性别</div>
                    <div>{{ item2.sexName }}</div>
                  </div>
                  <div class="title">
                    <div>身份证号码</div>
                    <div>{{ $infoHiding.handleIdCard(item2.certNo) }}</div>
                  </div>
                  <div class="title">
                    <div>联系电话</div>
                    <div>{{ $infoHiding.handlePhone(item2.phone) }}</div>
                  </div>
                  <div class="title">
                    <div>所属公司</div>
                    <div>{{ item2.company }}</div>
                  </div>
                  <div class="title">
                    <div>卡号</div>
                    <div>{{ item2.cardNo }}</div>
                  </div>
                  <div class="title">
                    <div>卡编号</div>
                    <div>{{ item2.cardCode }}</div>
                  </div>
                  <div class="title">
                    <div>办卡时间</div>
                    <div>{{ item2.handleCardTime }}</div>
                  </div>
                  <div class="title">
                    <div>还卡时间</div>
                    <div>{{ item2.returnCardTime }}</div>
                  </div>
                  <div class="title">
                    <div>工本费</div>
                    <div>{{ item2.cardCost }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>



<!--          <div v-if="formData.visitorsCardAppHdldetailList && formData.visitorsCardAppHdldetailList.length == 1" class="peopleMainSingle">-->
<!--            <div v-for="item2 in formData.visitorsCardAppHdldetailList" class="people">-->
<!--              <div class="fContentMain secondClass">-->
<!--                <div class="contentC">-->
<!--                  <div class="title">-->
<!--                    <div>姓名</div>-->
<!--                    <div>{{ item2.name }}</div>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <div>性别</div>-->
<!--                    <div>{{ item2.sexName }}</div>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <div>身份证号码</div>-->
<!--                    <div>{{ item2.certNo }}</div>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <div>联系电话</div>-->
<!--                    <div>{{ item2.phone }}</div>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <div>所属公司</div>-->
<!--                    <div>{{ item2.company }}</div>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <div>卡号</div>-->
<!--                    <div>{{ item2.cardNo }}</div>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <div>卡编号</div>-->
<!--                    <div>{{ item2.cardCode }}</div>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <div>办卡时间</div>-->
<!--                    <div>{{ item2.handleCardTime }}</div>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <div>还卡时间</div>-->
<!--                    <div>{{ item2.returnCardTime }}</div>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <div>工本费</div>-->
<!--                    <div>{{ item2.cardCost }}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>

      <!--            <van-form ref="form" class="vanForm">-->
      <!--              <van-field v-model="formData.appTypeLabel" readonly label="申请类型" />-->
      <!--              <van-field v-model="formData.applnt" readonly label="申请人名称"/>-->
      <!--              <van-field v-model="formData.occEmployer" readonly label="工作单位"/>-->
      <!--              <van-field v-model="formData.applntPhone" readonly label="申请人手机号" />-->
      <!--              <van-field v-model="formData.leaseBeginTime" readonly label="租住时间"/>-->
      <!--              <van-field v-model="formData.occJobTitleLabel" readonly label="职级"/>-->
      <!--              <van-field v-if="formData.appType == '2'"-->
      <!--                         v-model="formData.occ" readonly label="入住人名称"/>-->
      <!--              <van-field v-if="formData.appType == '2'"-->
      <!--                         v-model="formData.occPhone" readonly label="入住人手机号"/>-->
      <!--              <van-field v-model="formData.houseRequirement" readonly label="房屋需求" autosize type="textarea"/>-->
      <!--            </van-form>-->
    </basic-layout>
    <full-loading v-if="loading"></full-loading>
  </div>
</template>
<script>
import {getById} from "@/api/srvAssurance/visitorsCardApp/visitorsCardApp";
import {queryFileList} from "@api/common";

export default {
  name: 'detail',
  props: {},
  components: {},
  data() {
    return {
      loading: false,
      type: '',
      formData: {},
      fileUrlObjs: [],
    }
  },
  created() {
  },
  computed: {},
  beforeMount() {
    this.reset();
    let cardAppId = this.$route.query.param;
    this.type = this.$route.query.type;
    if (cardAppId) {
      this.initData(cardAppId);
    }
  },
  mounted() {
  },
  methods: {

    reset() {
      this.formData = {};
    },

    async initData(cardAppId) {
      await getById(cardAppId).then(res => {
        if (res.code === 1000 && res.data) {
          this.formData = {...res.data};
        }
      })
    },

    // 获取图片信息
    queryFileInfoData(filecodeArr) {
      this.loading = true;
      queryFileList(filecodeArr).then(res => {
        if (res.code === 1000 && res.data) {
          this.fileUrlObjs.push({
            title: "故障图片",
            value: [...res.data],
          });
          this.loading = false;
        }
      }).catch(() => {
        this.loading = false;
      })
    },

  },
}
</script>
<style lang="less" scoped>

.body_box {
  background-color: #f9f9f9;
  height: 100%;


  .fContentMain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(254, 255, 255);
    color: rgb(51, 51, 51);
    border: 0.1px solid rgb(220, 223, 230);
    border-radius: 6px;
    margin: 10px;
    padding: 10px;

    .contentC {
      display: flex;
      align-items: flex-start;
      background: rgb(255, 255, 255);
      color: rgb(51, 51, 51);
      height: 100%;
      flex-direction: column;
      justify-content: space-between;

      .title {
        display: flex;
        width: 100%;
        margin: 5px 10px;


        div:first-child {
          width: 100px;
          color: #878888;
        }

        div:last-child {
          width: calc(100% - 100px);
          //font-weight: 500;
        }

      }
    }
  }

  .firstClass {
    min-height: 120px !important;
  }

  .firstClass_02 {
    min-height: 60px !important;
  }

  .secondClass {
    min-height: 60px !important;
  }


  .head {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 10px 0px;
    background-color: rgb(254, 255, 255);
    flex-direction: column;

    .picStyle {
      background-image: url('../../../../assets/images/shz.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStyleNoPass {
      background-image: url('../../../../assets/images/prohibit.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStyleWait {
      background-image: url('../../../../assets/images/allocate.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStylePass {
      background-image: url('../../../../assets/images/complete.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .f {
      font-size: 20px;
      font-weight: 600;
    }

    .ff {
      font-size: 10px;
      font-weight: 600;
    }
  }


  .peopleMain {
    width: 100%;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;

    .people {
      width: 100%;
      flex-shrink: 0;
      scroll-snap-align: start;
      scroll-snap-stop: always;

      .fContentMain {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgb(254, 255, 255);
        color: rgb(51, 51, 51);
        border: 0.1px solid rgb(220, 223, 230);
        border-radius: 6px;
        margin: 10px;
        padding: 10px;

        .contentC {
          display: flex;
          align-items: flex-start;
          background: rgb(255, 255, 255);
          color: rgb(51, 51, 51);
          height: 100%;
          flex-direction: column;
          justify-content: space-between;

          .title {
            display: flex;
            width: 100%;
            margin: 5px 10px;


            div:first-child {
              width: 100px;
              color: #878888;
            }

            div:last-child {
              width: calc(100% - 100px);
              //font-weight: 500;
            }

          }
        }
      }


      &:first-child {
        .fContentMain {
          // 在整个页面，第一个div中增加一个图标
          &:first-child {
            &::after {
              content: '';
              display: inline-block;
              width: 30px;
              height: 30px;
              background: url('../../../../assets/images/right.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }

    }


  }



  .peopleMainSingle {
    width: 100%;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;

    .people {
      width: 100%;
      flex-shrink: 0;
      scroll-snap-align: start;
      scroll-snap-stop: always;

      .fContentMain {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgb(254, 255, 255);
        color: rgb(51, 51, 51);
        border: 0.1px solid rgb(220, 223, 230);
        border-radius: 6px;
        margin: 10px;
        padding: 10px;

        .contentC {
          display: flex;
          align-items: flex-start;
          background: rgb(255, 255, 255);
          color: rgb(51, 51, 51);
          height: 100%;
          flex-direction: column;
          justify-content: space-between;

          .title {
            display: flex;
            width: 100%;
            margin: 5px 10px;


            div:first-child {
              width: 100px;
              color: #878888;
            }

            div:last-child {
              width: calc(100% - 100px);
              //font-weight: 500;
            }

          }
        }
      }
    }


  }

  //.peopleMain::-webkit-scrollbar {
  //
  //}
}
</style>
